/**
 * Created by bjh on 2017/11/10.
 *
 */
import GM from "g2-mobile";
import { Component } from "react";

//components
import BasicChart from "./basicClass/basicChart.jsx";

const MARGIN_DEFAULT = [20, 20, 20, 20];

GM.Global.scales = {
    nice: true
};
class SmartStack extends Component {
    constructor(props, context) {
        super(props);
        this.state = {
        }
    }

    getChart() {
        return this._chart;
    }

    render() {
        let {
            chartData,
            margin = MARGIN_DEFAULT,
            color = "#3282FA",
            useTooltip = false,
            width = document.body.clientWidth,
            height = 400,
            size = 0,
            showLine = false,
        } = this.props;
        let data = chartData
        // data.sort((i, j) => {
        //     return j.yAxisData - i.yAxisData
        // })
        // || [
        //     { "yAxisData": 10, "xAxisData": "tokyo", "name": "tokyo"},
        //     { "yAxisData": 4, "xAxisData": "newYork", "name": "newYork" },
        //     { "yAxisData": 3, "xAxisData": "berlin", "name": "berlin" }
        // ];

        //为了让柱状图在有项无值的情况下显示
        let max = 0;
        let vData = data.map((item, index) => {
            max = item.yAxisData > max ? item.yAxisData : max;
            return item;
        })
        const configFunc = (chart) => {
            chart.source(vData, {
                yAxisData: {
                    type: 'linear', // 声明 type 字段为分类类型
                    min: 0, // 设定最小值
                    max: max,
                }
            });

            var cfg = false
            if (showLine) {
                cfg = {
                    label: false,
                    line: {
                        lineWidth: 1,
                        stroke: "#fff",
                    },
                    grid: function (text, index) {
                            return {
                                lineWidth: 1,
                                stroke: '#E3E4E4',
                            }
                    }
                }
            }
            chart.axis('xAxisData', cfg);

            chart.axis('yAxisData', false);


            let cfgChart = chart.interval()
                .position('xAxisData*yAxisData')
                .shape('roundRect')
                .color(color);

            // 限制柱状图柱子宽度
            if (size !== 0) {
                cfgChart.size(size < 12 ? 12 : size)
            }

            chart.render();
            var point = ['周日', 28];
            var html = "<div style='border-radius: 12px;border: none;width: 22px;height: 22px;background-color: rgba(102, 182, 241, 0.5);'></div>";
            var cfg = {
                align: 'cc',
                offset: [0, 0]
            }
            chart.guide().html(point, html, cfg);
            this._chart = chart;
        }

        return (
            <div style={{ width: width, height: height }}>
                <BasicChart
                    margin={margin}
                    width={width}
                    height={height}
                    chartData={data}
                    configFunc={configFunc}
                    useTooltip={useTooltip}
                />
            </div>
        )
    }
}

export default SmartStack